<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>次打卡模式</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes ripple {
            0% { transform: scale(0.8); opacity: 1; }
            100% { transform: scale(2.5); opacity: 0; }
        }
        .ripple-effect {
            position: relative;
            overflow: hidden;
        }
        .ripple-effect:after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            background-image: radial-gradient(circle, #fff 10%, transparent 10%);
            background-repeat: no-repeat;
            background-position: 50%;
            transform: scale(10,10);
            opacity: 0;
            transition: transform .5s, opacity 1s;
        }
        .ripple-effect:active:after {
            transform: scale(0,0);
            opacity: 0.3;
            transition: 0s;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 顶部导航 -->
    <nav class="bg-white p-4 shadow-sm flex justify-between items-center">
        <a href="plan-detail.html" class="text-gray-600">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h1 class="text-lg font-semibold">每周健身打卡</h1>
        <div class="w-6"></div>
    </nav>

    <!-- 主要内容 -->
    <div class="p-4">
        <!-- 计划信息 -->
        <div class="bg-white rounded-lg p-4 shadow-sm mb-4">
            <div class="text-center mb-3">
                <p class="text-gray-500">第3周/共12周</p>
                <div class="flex justify-center items-center mt-2">
                    <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">
                        <i class="fas fa-dumbbell mr-1"></i>
                        2/3次达标
                    </span>
                </div>
            </div>
            
            <!-- 打卡区域 -->
            <div class="border-t pt-4">
                <h3 class="text-sm font-medium text-gray-700 mb-3">本周健身次数</h3>
                
                <!-- 次打卡模式 -->
                <div class="flex flex-col items-center mb-6">
                    <button class="ripple-effect w-24 h-24 bg-blue-500 text-white rounded-full flex items-center justify-center text-4xl font-bold shadow-lg mb-4">
                        +
                    </button>
                    <p class="text-lg font-bold">本周累计 <span class="text-blue-600">2</span> 次</p>
                    <p class="text-sm text-gray-500 mt-1">推荐本周完成3次</p>
                </div>
            </div>
        </div>
        
        <!-- 照片上传 -->
        <div class="bg-white rounded-lg p-4 shadow-sm mb-4">
            <h3 class="text-sm font-medium text-gray-700 mb-3">上传训练照片</h3>
            <div class="grid grid-cols-3 gap-2">
                <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-plus text-gray-400 text-xl"></i>
                </div>
            </div>
        </div>
        
        <!-- 备注输入 -->
        <div class="bg-white rounded-lg p-4 shadow-sm mb-4">
            <h3 class="text-sm font-medium text-gray-700 mb-3">训练记录</h3>
            <textarea class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary" 
                      rows="3" placeholder="记录今日训练内容..."></textarea>
            <div class="flex flex-wrap mt-2">
                <span class="text-xs bg-gray-100 px-2 py-1 rounded mr-2 mb-2">#力量训练</span>
                <span class="text-xs bg-gray-100 px-2 py-1 rounded mr-2 mb-2">#有氧运动</span>
                <span class="text-xs bg-gray-100 px-2 py-1 rounded mr-2 mb-2">#拉伸放松</span>
            </div>
        </div>
        
        <!-- 打卡按钮 -->
        <button id="checkin-btn" class="w-full py-3 bg-blue-600 text-white font-bold rounded-lg shadow-md hover:shadow-lg transition-all">
            确认打卡
        </button>
    </div>

    <script>
        document.getElementById('checkin-btn').addEventListener('click', function() {
            alert('打卡成功！');
            window.location.href = 'plan-detail.html';
        });
    </script>
</body>
</html>